<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>NormalSystem</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/jquery.js"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script type="text/javascript" src="./js/role.js"></script>
    </head>
  
  <body>
    <div class="x-body">
        <form action="" method="post" class="layui-form layui-form-pane" lay-filter="bindPermission">
                <div class="layui-form-item">
                    <label for="roleName" class="layui-form-label">
                        <span class="x-red">*</span>角色名
                    </label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="roleId" name="roleId" />
                        <input type="text" id="roleName" name="roleName" required="" lay-verify="required"
                        autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        拥有权限
                    </label>
                    <table  class="layui-table layui-input-block">
                        <tbody id="permissions">

                        </tbody>
                    </table>
                </div>
                <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="bindPermission">绑定</button>
              </div>
            </form>
    </div>
    <script>
            var str=location.href; //取得整个地址栏
            var num=str.indexOf("?")
            str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
            var arr=str.split("&"); //各个参数放到数组里
            var roleName = decodeURI(arr[1].substr(arr[1].indexOf("=")+1)),roleId = arr[0].substr(arr[0].indexOf("=")+1);
            $("#roleName").val(roleName);
            $("#roleId").val(roleId);

            var obj = new Object();
            obj.optId = roleId;
            myAjax($, 'ms-pms/permission/list', obj, function (res) {
                var html = '';
                res.forEach(function (value) {
                    var check1 = value.status==10?'checked':'';
                    html += '<tr>';
                    html += '<td><input data-type="parent" lay-filter="permission"  type="checkbox" name="id" '+check1+' lay-skin="primary" title="'+value.name+'" value="'+value.id+'"></td>';
                    html += '<td><div class="layui-input-block">';
                    value.children.forEach(function (value2) {
                        var check2 = value2.status==10?'checked':'';
                        html += '<input data-type="son" lay-filter="permission"  name="id" lay-skin="primary" '+check2+' type="checkbox" title="'+value2.name+'" value="'+value2.id+'">';
                    })
                    html += ' </div></td></tr>';
                })
                $("#permissions").html(html)
                layui.use('table', function() {
                    var table = layui.table;
                    table.init();
                });
                layui.use('form', function() {
                    var form = layui.form;
                    form.on('checkbox(permission)', function(data) {
                        if (data.elem.checked == true) {
                            if($(this).attr("data-type") == 'son') {

                                //点子 父一定为选中
                                $(this).parents('tr').find("td:first").find("input:checkbox").each(function () {
                                    $(this).prop("checked",true);
                                })
                            }

                            if($(this).attr("data-type") == 'parent') {
                                //点父所有子选中
                                $(this).parents('tr').find("td:last").find("div").find("input:checkbox").each(function () {
                                    $(this).prop("checked",true);
                                })

                            }
                        } else if (data.elem.checked == false) {
                            if($(this).attr("data-type") == 'son') {
                                //判断所有子是否没选中，都没选中，父为不选中
                                var bol = true;
                                $(this).parents('tr').find("td:last").find("input:checkbox").each(function () {
                                    if($(this).prop("checked") == true) {
                                        bol = false;
                                    }
                                })

                                if(bol) {
                                    $(this).parents('tr').find("td:first").find("input:checkbox").each(function () {
                                        $(this).prop("checked",false);
                                    })
                                }


                            }
                            if($(this).attr("data-type") == 'parent') {
                                //所有子全不选中
                                $(this).parents('tr').find("td:last").find("div").find("input:checkbox").each(function () {
                                    $(this).prop("checked",false);
                                })
                            }
                        }
                        form.render();
                        form.render('select');
                    })

                    form.render();
                    form.render('select');
                });
            }, true)


    </script>
  </body>

</html>